<template>
  <div class="tab_box app_background">

    <!--标题栏-->
    <header class="header-top clearfix co-flex" id='header'>
      <a href="javascript:;" class="back-btn iconfont icon-fanhui co-f05" @click="back()"></a>
      <h3 class="header-title text-center co-f1 position-inherit" v-html="headerTitle"></h3>
      <a class="collect co-f05" :class="{'red':subStatus}" @click="topCollect()" >
        <i class="start-icon iconfont icon-shoucang"></i>
        {{subStatus ? '已收藏':'收藏'}}
      </a>
    </header>
    <!--内容头部-->
    <div id="contentTop" class="content-top m-b-10rem">
      <div class="content-title">
        <h2 class="title-text text-center" v-html="contentTitle"></h2>
        <a class="choose-date" id="chooseDate"  @tap="chooseDate()">当期
          <i class="date-icon iconfont icon-shijian"></i>
        </a>
      </div>
      <!--折线图-->
      <div class="chart">
        <div id="detailEchart" class="detail-echart" v-if="noDataShow[0]"></div>
        <div class="none-data color-White" v-else="noDataShow[0]">暂无图表数据</div>
      </div>
    </div>
    <div id="" class="content-main m-b-26rem">
      <!--swiper-->
      <div class="content-swiper m-lr-05rem">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in slideData" @click="clickSwiper(item.id,item.subStatus)">
                <div class="swiper-box white-bg-box p-tb-05rem">
                  <div class="border-bottom swiper-top">
                    <div class="swiper-content co-flex">
                      <div class="num-box co-f1">指标样本数{{item.sampleNum | ceilFilters}}个</div>
                      <div class="swiper-text co-f1 p-t-02rem">对应车站（{{item.indexUnit}}）</div>
                    </div>
                    <div class="value-box">{{item.extendInfo.squareMinIndexValue | roundFilters}}~{{item.extendInfo.squareMaxIndexValue | roundFilters}}</div>
                  </div>
                  <div class="border-bottom swiper-middle p-t-05rem">
                    <div class="swiper-content">
                      <div class="swiper-text text-right">对应工程({{item.extendInfo.squareIndexUnit}})</div>
                      <div class="value-box">{{item.minIndexValue | roundFilters}}~{{item.maxIndexValue | roundFilters}}</div>
                    </div>
                  </div>
                  <div class="swiper-bottom p-t-05rem p-lr-05rem">
                    <i class="proportion-icon iconfont icon-zhanbi"></i>
                    <ul class="co-flex">
                      <li class="co-f2">
                        <div>{{item.extendInfo.totalPercent | percentFilters}}</div>
                        <div class="color-999999">总占比</div>
                      </li>
                      <li class="co-f12">
                        <div>{{item.extendInfo.sameGradePercent | percentFilters}}</div>
                        <div class="color-999999">同级比</div>
                      </li>
                      <li class="co-f3 text-right">
                        <div>{{item.extendInfo.qtyMinIndexValue | roundFilters}}~{{item.extendInfo.qtyMaxIndexValue | roundFilters}}</div>
                        <div class="color-999999">{{item.extendInfo.qtyIndexUnit}}</div>
                      </li>
                    </ul>
                  </div>
                </div>
            </div>
          </div>
        </div>
       </div>
      <!--工程特征-->
      <div class="chara-box white-bg-box pad-1rem">
        <p class="font-12rem m-b-05rem">工程特征</p>
        <p class="color-999999 font-06rem" v-for="(item,index) in radarData">{{item.nextName+':'}}{{item.nextMinValue | percentFilters}}~{{item.nextMaxValue | percentFilters}}</p>
        <!--雷达图-->
        <div class="chart">
          <div id="radarEchart" class="radar-echart" v-if="noDataShow[1]"></div>
          <div class="none-data color-gray" v-html="noDataText" v-else="noDataShow[1]"></div>
        </div>
      </div>
      <!--主材特征-->
      <div class="white-bg-box pad-1rem table-box">
        <p class="font-12rem">主材特征</p>
        <div v-if="noDataShow[2]">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed">
            <thead class="color-999999">
            <tr>
              <th width="30%">名称</th>
              <th width="10%">占比</th>
              <th width="30%" class="text-center">操作</th>
            </tr>
            </thead>
          </table>
          <div style="height: 11rem" class="overflow-scroll">
            <scroller :on-infinite="featuresInfinite" ref="indexsublist">
              <div class="table-body">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed td-padding">
                  <tbody>
                  <tr v-for="(item,index) in materialsData">
                    <td width="30%" v-html="item.name"></td>
                    <td width="10%">{{item.percent | percentFilters}}</td>
                    <td width="30%">
                      <button type="button" class="mui-btn mui-btn-danger font-06rem" :class="{'mui-btn-outlined':!item.collected}" @click="collect(item)">{{item.collected ? '已收藏':'收藏'}}</button>
                      <button type="button" class="mui-btn font-06rem" @click="lookFeature(item.id,item.collected)">查看</button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </scroller>
          </div>
        </div>
        <div class="none-data color-gray" v-html="noDataText" v-else="noDataShow[2]"></div>
      </div>
      <!--主材含量-->
      <div class="white-bg-box pad-1rem table-box">
        <p class="font-12rem">主材含量</p>
        <div v-if="noDataShow[3]">
          <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed">
            <thead class="color-999999">
            <tr>
              <th width="38%">名称</th>
              <th width="20%">含量</th>
              <th width="20%">单位</th>
            </tr>
            </thead>
          </table>
          <div style="height: 10rem" class="overflow-scroll">
            <scroller :on-infinite="contentInfinite"  ref="indexsublist">
              <div class="table-body">
                <table cellspacing="0" cellpadding="0" border="0" width="100%" class="custom-table left border-b-dashed td-padding">
                  <tbody>
                  <tr v-for="(item,index) in contentData">
                    <td width="38%" v-html="item.name"></td>
                    <td width="20%">{{item.consume | roundFilters}}</td>
                    <td width="20%" v-html="item.unit"></td>
                    <!--<td>-->
                    <!--<button type="button" class="mui-btn font-06rem" @click="lookContent(item.integrationId)">查看</button>-->
                    <!--</td>-->
                  </tr>
                  </tbody>
                </table>
              </div>
            </scroller>
          </div>
        </div>
        <div class="none-data color-gray" v-html="noDataText" v-else="noDataShow[3]"></div>
      </div>
    </div>

    <loading v-show="FangLoading"></loading>
    <fangerror :fangerroring="fangerroring" :fangerrorText="fangerrorText"></fangerror>
    <meun></meun>

  </div>
</template>

<script src="../../../static/js/detail.js"></script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../static/plugins/swiper4x/swiper.min.css"
  @import "../../../static/css/metro-detail.css"
</style>
